<template>
    <div class="container" style="background-color: #fff;height:100vh">
        <div class="defultView" v-if="!status" style="background:#FFF">
            <div class="imgDiv">
                <img class="logo" src="../../images/discount/card_default.png" />
            </div>
            <div class="section">
                <input class="weui-input lbInput" type="text" @input="getCode" placeholder="请输入兑换码" focus />
            </div>
            <button class="exchangeButton" @click="exchange" :disabled="disabled">兑换卡券</button>
            <div class="tips">
                <div>兑换成功后，优惠券请在“我的优惠券”中查看</div>
                <div>赠送金额请在“我的钱包”中查看</div>
            </div>
        </div>
        <div class="exchangeView" v-else>
            <div class="success_area">
                <img class="logo" src="../../images/discount/card_success.png" />
                <div class="success_tip">兑换成功!</div>
            </div>
            <div class="listView">
                <!--代金券-->
                <div class="cardItem" v-for="(item, index) in cashList" :key="index">
                    <img class="itemBg" src="../../images/discount/cash.png">
                        <div class="leftArea cash" style="color:#FFF">
                            <div>¥<span class="moneyNum">{{appData.cashCouponAmt}}</span></div>
                        </div>
                        <div class="rightArea">
                            <div class="titleArea">
                                <span class="title" style="color:#FF6E2A">出行代金券</span>
                            </div>
                            <div class="areaBottom">
                                <span>有效期至{{appData.cashCouponEndTime}}</span>
                                <span>仅用于单笔订单支付</span>
                            </div>
                        </div>
                </div>
                <!--折扣-->
                <div class="cardItem" v-for="(item, index) in discountList" :key="index">
                    <img class="itemBg" src="../../images/discount/discount.png">
                        <div class="leftArea">
                            <span><span class="num">{{appData.discountCouponAmt}}</span>折</span>
                        </div>
                        <div class="rightArea">
                            <div class="titleArea">
                                <span class="title" style="color:#FFBF00">出行折扣券</span>
                            </div>
                            <span class="desc"
                                  v-if="appData.discountCouponUpperLimit">最高抵{{appData.discountCouponUpperLimit}}元</span>
                            <div class="areaBottom">
                                <span>有效期至{{appData.discountCouponEndTime}}</span>
                                <span>仅用于单笔订单支付</span>
                            </div>
                        </div>
                </div>

                <!-- 费用 -->
                <div class="cardItem" v-if="appData.giveBalance>0">
                    <img class="itemBg" src="../../images/discount/free.png">
                        <div class="leftArea" style="color:#fff">
                            <div>¥<span class="moneyNum">{{appData.giveBalance}}</span></div>
                        </div>
                        <div class="rightArea">
                            <div class="titleArea">
                                <span class="title" style="columns: #222222;">骑行费用</span>
                            </div>
                            <div class="areaBottom">
                                <span>按实际骑行扣费</span>
                                <span>可在“我的钱包”中查看</span>
                            </div>
                        </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import card from "./card";

    export default {
        mixins: [card],
    }
</script>
<style scoped lang="stylus">
    @import "./card.styl"
</style>
